<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="lib/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/starter-template.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="lib/html5shiv.js"></script>
    <script src="lib/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<!-- 导航 菜单 -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img alt="约书亚CMS" src="image/logo_420-416.png">CMS</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.html">首页</a></li>
                <li class="active"><a href="#">笔记</a></li>
                <li><a href="#contact">话题</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href=""><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></a></li>
                <li><a href=""><span class="glyphicon glyphicon-bell" aria-hidden="true"></span></a></li>
                <li><a href=""><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
            </ul>
            <form class="navbar-form navbar-right" role="form">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for..."  id="input_search">
                      <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">Go!</button>
                      </span>
                </div>
            </form>


        </div><!--/.navbar-collapse -->
    </div>
</div>

<!-- 内容 -->
<div class="container-fluid" style="padding-top: 20px">
    <div class="row">
        <div class="col-sm-9" id="column-left">
            <!-- 文章标题 -->
            <div class="article-title">
                <h1>AngularJS指令与双向数据绑定</h1>
            </div>
            <!-- 文章属性-->
            <div class="row">
                <div class="col-md-12 article-attrs">
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="image/heads/noavatar_small.gif" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <label class="author-name">doterlin</label>
                            <label>发布于</label> <i>2 小时前</i>
                            <label>浏览：</label> <i>45</i>
                            <label>类型：</label> <i>转载 - 随笔</i>
                            <label>分类：</label> <i>JavaScript - Angular</i>
                            <label>二维码：</label><span class="glyphicon glyphicon-qrcode"></span>
                            <label class="label label-danger">转载说明</label>
                        </div>
                    </div>
                </div>
            </div>
            <hr/>
            <!-- 文章内容 -->
            <div class="row">
                <div class="col-md-12">
                    <p>在html中，我们经常会看到有一些我们不熟悉的东东，例如，ng-app,ng-controller等等之类的，这些在AngularJS中，我们称这些为指令，指令是来完成一些功能的，ng-controller就是一个控制器，能够连接视图与我们数据的一个桥梁，ng-app是一个初始化的指令，如果不写ng-app，AngularJS是不会执行的，因为没有初始化，可以把之前的例子的ng-app进行去掉可以看到AngularJS是不会执行的。
                    </p>
                    <p>在html中，我们经常会看到有一些我们不熟悉的东东，例如，ng-app,ng-controller等等之类的，这些在AngularJS中，我们称这些为指令，指令是来完成一些功能的，ng-controller就是一个控制器，能够连接视图与我们数据的一个桥梁，ng-app是一个初始化的指令，如果不写ng-app，AngularJS是不会执行的，因为没有初始化，可以把之前的例子的ng-app进行去掉可以看到AngularJS是不会执行的。
                    </p>
                    <p>在html中，我们经常会看到有一些我们不熟悉的东东，例如，ng-app,ng-controller等等之类的，这些在AngularJS中，我们称这些为指令，指令是来完成一些功能的，ng-controller就是一个控制器，能够连接视图与我们数据的一个桥梁，ng-app是一个初始化的指令，如果不写ng-app，AngularJS是不会执行的，因为没有初始化，可以把之前的例子的ng-app进行去掉可以看到AngularJS是不会执行的。
                    </p>
                </div>
            </div>
            <hr/>
            <!-- 标签 -->
            <div class="row">
                <div class="col-md-12 article-tag">
                    <label>标签： </label>
                    <span class="glyphicon glyphicon-tags">Javascript</span>
                    <span class="glyphicon glyphicon-tags">Html/CSS</span>
                </div>
            </div>

            <!-- 赞 收藏 社交分享 -->
            <div class="row">
                <div class="col-md-12 article-tag">
                    <div class="row">
                        <div class="col-md-4 left">
                            分享
                        </div>
                        <div class="col-md-4 center-block">
                            <div class="zan">
                                <sapn class="glyphicon glyphicon-thumbs-up"></sapn>
                                <span class="geige">给个赞</span>
                                <span class="zan-num">30 人点赞</span>
                            </div>
                        </div>
                        <div class="col-md-4 right">
                            <div class="btn-favorit">
                                <sapn class="glyphicon glyphicon-heart"></sapn>
                                <span class="favorit-num">30 人收藏</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="titleBar bs-callout bs-callout-info left">
                        <h3>评论</h3><div>已有 <span class="badge">4</span> 条评论；以下用户言论只代表其个人观点，不代表我们的观点或立场。</div>
                    </div>
                    <div class="reply-container">
                        fdfsd
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="titleBar comments left">
                        <h3>最新评论</h3>
                    </div>
                    <div class="reply-container">
                        fdfsd
                    </div>
                </div>
            </div>
        </div>

        <!-- 右边 -->
        <div class="col-sm-3"  id="column-right">
            <div class="row">
                <div class="col-lg-12 " ><button class="btn btn-block btn-primary btn-lg glyphicon glyphicon-pencil">写文章</button></div>
            </div>

            <div class="row">
                <div class="col-sm-6" >
                    <span>总笔记:</span><label class="text-info"><b class="fs16">19,495</b></label>
                </div>
                <div class="col-sm-6" >
                    <span>总阅读:</span> <label class="text-info"><b class="fs16">12,943,771</b></label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 articles-writing" >
                    <span>正在写文章：</span>
                    <a href="#"><img src="image/heads/21438_1bb11fd8dc9eb96a64a3254ca7b50d86_small.jpg"></a>
                    <a href="#"><img src="image/heads/24344_e090d9560a902fa840d0b6024df0d503_small.jpg"></a>
                    <a href="#"><img src="image/heads/25882_164ec3053b616b5034ece5db18f4faf0_small.jpg"></a>
                    <a href="#"><img src="image/heads/21438_1bb11fd8dc9eb96a64a3254ca7b50d86_small.jpg"></a>
                    <a href="#"><img src="image/heads/24344_e090d9560a902fa840d0b6024df0d503_small.jpg"></a>
                    <a href="#"><img src="image/heads/25882_164ec3053b616b5034ece5db18f4faf0_small.jpg"></a>
                    <a href="#"><img src="image/heads/21438_1bb11fd8dc9eb96a64a3254ca7b50d86_small.jpg"></a>
                    <a href="#"><img src="image/heads/24344_e090d9560a902fa840d0b6024df0d503_small.jpg"></a>
                    <a href="#"><img src="image/heads/25882_164ec3053b616b5034ece5db18f4faf0_small.jpg"></a>
                    <a href="#"><img src="image/heads/21438_1bb11fd8dc9eb96a64a3254ca7b50d86_small.jpg"></a>
                    <a href="#"><img src="image/heads/24344_e090d9560a902fa840d0b6024df0d503_small.jpg"></a>
                    <a href="#"><img src="image/heads/25882_164ec3053b616b5034ece5db18f4faf0_small.jpg"></a>
                    <a href="#"><img src="image/heads/21438_1bb11fd8dc9eb96a64a3254ca7b50d86_small.jpg"></a>
                    <a href="#"><img src="image/heads/24344_e090d9560a902fa840d0b6024df0d503_small.jpg"></a>
                    <a href="#"><img src="image/heads/25882_164ec3053b616b5034ece5db18f4faf0_small.jpg"></a>
                </div>
            </div>

            <!--推荐文章-->
            <div class="row">
                <div class="col-md-12">
                    <div class="titleBar bs-callout bs-callout-info">
                        <h3>推荐文章</h3>
                    </div>
                    <div class="article-top20 clearfix">
                        <ul>
                            <li><a href="#"><i class="toprank_blue">1</i>我的右键菜单，我做主！</a></li>
                            <li><a><i class="toprank_blue">2</i>web前端35个jQuery小技巧！</a></li>
                            <li><a><i class="toprank_blue">3</i>关于使用vertical-align使图片垂直居中的小细节</a></li>
                            <li><a><i>4</i>听说，HTML5和手机传感器更配哦！手机DEMO［内含广告］</a></li>
                            <li><a><i>5</i>重载jQuery对象方法，让animate支持颜色渐变动画</a></li>
                            <li><a><i>6</i>网页进度条</a></li>
                            <li><a><i>7</i>CSS3 绘制 摩天轮 skywheel 转转转！</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--火热文章-->
            <div class="row">
                <div class="col-md-12">
                    <div class="titleBar bs-callout bs-callout-info">
                        <h3>火热文章</h3>
                    </div>
                    <div class="article-top20 clearfix">
                        <ul>
                            <li><a href="#"><i class="toprank_red">1</i>我的右键菜单，我做主！</a></li>
                            <li><a><i class="toprank_red">2</i>web前端35个jQuery小技巧！</a></li>
                            <li><a><i class="toprank_red">3</i>关于使用vertical-align使图片垂直居中的小细节</a></li>
                            <li><a><i>4</i>听说，HTML5和手机传感器更配哦！手机DEMO［内含广告］</a></li>
                            <li><a><i>5</i>重载jQuery对象方法，让animate支持颜色渐变动画</a></li>
                            <li><a><i>6</i>网页进度条</a></li>
                            <li><a><i>7</i>CSS3 绘制 摩天轮 skywheel 转转转！</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--写作达人-->
            <div class="row">
                <div class="col-md-12 articles-writing-top">
                    <div class="titleBar bs-callout bs-callout-info">
                        <h3>写作达人</h3>
                    </div>

                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object img-circle" src="image/heads/default-1.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading">
                                <a href="#" class="author-name">小李飞刀</a>
                                <span class="badge" onMouseOver="$(this).tooltip('show')" data-toggle="tooltip" title="笔记总数：42">42</span>
                            </h5>
                            <h5 class="media-heading">
                                <a href="#" class="article-title"> Middle aligned media</a>
                            </h5>
                        </div>
                    </div>

                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object img-circle" src="image/heads/default-1.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading">
                                <a href="#" class="author-name">小李飞刀</a>
                                <span class="badge"  onMouseOver="$(this).tooltip('show')" data-toggle="tooltip" title="笔记总数：42">42</span>
                            </h5>
                            <h5 class="media-heading">
                                <a href="#" class="article-title"> Middle aligned media</a>
                            </h5>
                        </div>
                    </div>
                </div>
            </div>






        </div>
    </div>


</div><!-- /.container -->

<!-- 底部 -->
<div id="footer">
    <div class="container-fluid">
        <div class="row">
            <a href="">关于我们</a>
            <a href="">商务合作</a>
            <a href="">合作案例</a>
            <a href="">商务联系</a>
            <a href="">注册协议</a>
            <a href="">免责声明</a>
            <a href="">版权隐私</a>
            <a href="">新浪微博</a>
        </div>
        <div class="row">
            <p class="text-muted">Copyright © JoshuaIt.com All Rights Reserved. 苏ICP备16010632号</p>
        </div>
    </div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="lib/jquery-1.12.4.min.js"></script>
<script src="lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="lib/scroll.js"></script>
<script src="js/myJs.js"></script>
</body>
</html>
